import 'package:flutter/material.dart';

// 布局组件一般用于描述子控件的位置，有多个子控件
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('线性布局'),
        ),
        body: ColumnWidget(),
      ),
    );
  }
}

class ColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RowPart(),
        RowPart(),
        RowPart(),
        RowPart(),
      ],
    );
  }
}

class RowPart extends StatefulWidget {
  @override
  _RowPartState createState() => _RowPartState();
}

class _RowPartState extends State<RowPart> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          // 四个方向加padding
          padding: const EdgeInsets.all(8.0),
          child: Icon(Icons.arrow_back),
        ),
        Padding(
          // 单独给垂直或者横向加padding
          padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 18),
          child: Icon(Icons.arrow_downward),
        ),
        Icon(Icons.arrow_upward),
        Icon(Icons.arrow_forward),
      ],
    );
  }
}
